<template>
  <div class="bullet-price-predict-section">
    <!-- 第一行：规则说明 -->
    <div class="rules-section">
      <bullet-predict-rules />
    </div>

    <!-- 第二行：分类选择 -->
    <div class="selector-section">
      <bullet-type-selector
        :selected-type-id="selectedTypeId"
        @type-change="handleTypeChange"
      />

      <div class="refresh-controls">
        <n-space align="center" :size="8">
          <n-tag size="small" type="info">{{ selectedTypeName }}</n-tag>
          <n-button
            size="small"
            type="primary"
            ghost
            @click="refreshData"
            :loading="loading"
          >
            刷新数据
          </n-button>
        </n-space>
      </div>
    </div>

    <!-- 第三行：子弹信息卡片 -->
    <div class="bullets-section">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <loading-skeleton type="card" :count="6" />
      </div>

      <!-- 空状态 -->
      <div v-else-if="bulletPredicts.length === 0" class="empty-state">
        <n-empty description="暂无预测数据" size="large">
          <template #extra>
            <n-button size="small" @click="refreshData">
              重新加载
            </n-button>
          </template>
        </n-empty>
      </div>

      <!-- 子弹卡片网格 -->
      <div v-else class="bullets-grid">
        <div
          v-for="(item, index) in bulletPredicts"
          :key="item.id"
          class="bullet-card-wrapper"
        >
          <bullet-predict-item-home :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getBulletPredictList } from '@/api/bulletPrice'
import type { BulletPredictItem } from '@/types/bulletPrice'
import LoadingSkeleton from '@/components/common/LoadingSkeleton.vue'
import BulletPredictRules from './BulletPredictRules.vue'
import BulletTypeSelector from './BulletTypeSelector.vue'
import BulletPredictItemHome from './BulletPredictItem.vue'

// 响应式数据
const loading = ref(false)
const bulletPredicts = ref<BulletPredictItem[]>([])
const selectedTypeId = ref(0)
const selectedTypeName = ref('全部类型')
// 处理类型变化
const handleTypeChange = (typeId: number, typeName: string) => {
  selectedTypeId.value = typeId
  selectedTypeName.value = typeName
  fetchBulletPredicts()
}

// 获取子弹预测数据
const fetchBulletPredicts = async () => {
  try {
    loading.value = true
    const response = await getBulletPredictList({
      limit: 6,
      type_id: selectedTypeId.value
    })

    if (response.code === 1) {
      const data = response.data || []
      bulletPredicts.value = data
    } else {
      console.error('获取子弹预测数据失败:', response.message)
      bulletPredicts.value = []
    }
  } catch (error) {
    console.error('获取子弹预测数据失败:', error)
    bulletPredicts.value = []
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = () => {
  fetchBulletPredicts()
}

// 组件挂载时获取数据
onMounted(() => {
  fetchBulletPredicts()
})
</script>

<style scoped>
.bullet-price-predict-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rules-section {
  width: 100%;
}

.selector-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.refresh-controls {
  flex-shrink: 0;
}

.bullets-section {
  width: 100%;
}

.loading-container {
  padding: 40px 20px;
  text-align: center;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.bullets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
}

.bullet-card-wrapper {
  width: 100%;
  min-height: 300px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .bullets-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .bullet-price-predict-section {
    gap: 16px;
  }

  .selector-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .bullets-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bullet-card-wrapper {
    min-height: 250px;
  }

  .loading-container {
    padding: 30px 16px;
  }

  .empty-state {
    padding: 40px 16px;
  }
}

@media (max-width: 480px) {
  .bullets-grid {
    gap: 8px;
  }

  .bullet-card-wrapper {
    min-height: 220px;
  }
}
</style>
